<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            height: 300px;
            background-color: burlywood;
        }
        img:nth-child(6){
            margin-left: 40px;
        }
        button{
            width: 100px;
            margin: 30px auto;
            margin-left: 30px;
        }
    </style>
    <script>
        window.onload=function(){
            var btns=document.getElementsByTagName('button');
            var imgs=document.images;

            btns[0].onclick=function(){
                //点击时，每隔一秒执行一次函数
                var id=setInterval(clock,1000);
                btns[1].onclick=function(){
                clearInterval(id);
            }
            }
            
            function clock(){
                var today=new Date();
                var hour=handler(today.getHours());
                var min=handler(today.getMinutes());
                var sec=handler(today.getSeconds());
                // console.log(hour);
                var str=hour+min+sec;
                // console.log(str);
                //通过图片对应下标
                for(var i=0;i<imgs.length;i++){
                    //设置dom对象的图片路径
                    imgs[i].src='./images/'+str.charAt(i)+'.png'
                }
            }
            //处理单数的数字
            function handler(num){
                if(num>=10){
                    return num+'';
                }else{
                    return '0'+num;
                }
            }
        }
    </script>
</head>
<body>
    
    <div>
        <button>跟进时间</button>
        <button>停止跟进</button>
        <br>
        <br>
        <br>
        <img src="./images/0.png" alt="">
        <img src="./images/0.png" alt="">&nbsp;时
        <img src="./images/0.png" alt="">
        <img src="./images/0.png" alt="">&nbsp;分
        <img src="./images/0.png" alt="">
        <img src="./images/0.png" alt="">&nbsp;秒
    </div>
    
</body>
</html>